<template>
  <div class="shop" ref="shopTarget">
    <div class="late">热门商品</div>
    <div
      class="demo"
      style="margin: 0 auto"
      v-masonry
      gutter="15"
      percent-position="true"
      fit-width="true"
      ref="waterfallTarget"
    >
      <div
        v-masonry-tile
        class="card"
        v-for="item in goodsData"
        :key="item.id"
        @click="handler(item.id, item)"
      >
        <div>
          <img :src="item.s_goods_photos[0].path" alt="" />
          <div class="goodsMsg">
            <div class="goodsName">
              <p>{{ item.name }}</p>
            </div>
            <div class="goodsDesc">{{ item.desc }}</div>
            <div class="price">
              <p>
                <strong>￥</strong> {{ item.price }}
                <span>库存:{{ item.stock_num }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  nextTick,
  onMounted,
  defineProps,
  defineEmits,
  onUpdated,
} from "vue";
import { delayPrint } from "../../../utils/index";
import { useRouter } from 'vue-router'
let router = useRouter()

defineProps({
  goodsData: Array,
});
//数据发生改变触发的生命周期
onUpdated(() => {
  nextTick(() => {
    //获取瀑布流的动态高度
    let a = waterfallTarget.value.style.height.slice(0, -2);
    shopTarget.value.style.height = Number(a) + 100 + "px";
  });
});
onMounted(() => {
  setTimeout(() => {
    //确保数据回来
    nextTick(() => {
      //获取瀑布流的动态高度
      console.log(waterfallTarget.value.style.height);
      let a = waterfallTarget.value.style.height.slice(0, -2);
      shopTarget.value.style.height = Number(a) + 100 + "px";
    });
  }, 1000);
});
//注册事件
const emits = defineEmits(["go"]);
function cb () {
  console.log("dddd");
  const { scrollHeight, scrollTop, clientHeight } = document.documentElement;
  console.log(scrollHeight, scrollTop, clientHeight);
  if (scrollHeight - scrollTop - 2 <= clientHeight) {
    console.log("触底了");
    //派发一个事件到父组件中更新数据
    emits("go");
  }
}
document.addEventListener("scroll", delayPrint(800, cb));
let shopTarget = ref(null);
let waterfallTarget = ref(null);

const handler = (id, item) => {
  console.log(item);
  router.push(`/ShopnameList?id=${id}`)
}
</script>

<style lang="scss" scoped>
.shop {
  width: 100%;
  height: 2rem;
  background-color: #fff;
}

.late {
  width: 100%;
  height: 0.5rem;

  font-size: 0.16rem;
  text-align: center;
  line-height: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
}

.shop {
  .title {
    margin: 0.14rem 0 0.14rem 0.18rem;
    h2 {
      font-size: 0.18rem;
      color: #333;
    }
  }
  .card {
    width: 43vw;
    background-color: rgba(193, 210, 240, 0.7);
    padding: 0.04rem;
    border-radius: 10%;
    margin: 0.12rem 0;

    img {
      width: 100%;
      display: block;
      height: auto;
    }
    .goodsMsg {
      .goodsName {
        margin: 0.1rem 0;
        p {
          font-size: 0.14rem;
          color: #333;
          width: 100%;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
      .goodsDesc {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-bottom: 0.04rem;
        color: #666;
      }
      .price {
        p {
          font-size: 0.2rem;
          color: #ff4142;
          margin: 0.03rem 0;
          span {
            font-size: 0.06rem;
            color: #999;
            margin-left: 0.3rem;
            display: inline-block;
          }
          strong {
            font-size: 0.14rem;
            margin-left: 0.04rem;
          }
        }
      }
    }
  }
}
</style>
